/* 定义less 变量 
属性值定义变量
属性名定义变量
选择器定义变量

变量的延迟加载
第一种 现在当前元素中查找，有，用当前的，如果没有，一层一层往上找，直到最外层
第二种当前元素中有，就在当前找 有多个，使用最后一个


在less类似于函数的代码块称为混合(mixin)
混合可以传参，也可以不传参
不传参 
调用时直接调用 .混合名（）直接调用
传参
有形参默认值
当有形参默认值，可以不传参，默认使用形参默认值，当传参时，使用传入的参数
无形参默认值
当无形参默认值时，调用混合必须传递参数

less中可以做运算 加减乘除  注意运算符左右加空格

可以写循环语句

*/
/* 引入外链的less文件 */
@import './reset.less';
@zero: 0;
// @w: width;
@wr: wrap;

.center(@w: 400px, @h: 400px, @color: yellow) {
    width: @w;
    height: @h;
    background-color: @color;
    position: absolute;
    left: @zero;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

* {
    margin: 0;
    padding: 0;
}

.@{wr} {
    // @zero: 200px;

    .center(@w: 600px, @h: 600px, @color: red);
    // @zero: 100px;

    .inner {
        .center();

        .box {
            .center(@w: 200px, @h: 200px, @color: pink);
        }
    }
}

.box-wrap {
    width: 55 * 5px;
    height: 100px;
    background-color: purple;
}

.loop(@i) when (@i>0) {
    width: (10px + 5 * @i);
    .loop(@i - 1);
}

/* 栅格系统 */
/* 
 width: 30px;
  width: 25px;
  width: 20px;
  width: 15px;

*/
/* 
width: 15px;
  width: 20px;
  width: 25px;
  width: 30px;
*/

.test {
    .loop(4);
}

/* .test {
    width: 100px;
    height: 100px;
    background-color: greenyellow;
} */

/* 李博俊很帅气！ */
//走神了！！